.sign-page-container{
  background-size: 100% auto;
  background-repeat: no-repeat;
  .mask{
    @include mask(0.5, 9);
    &.active{
      display: block;
    }
  }
  .header{
    padding-top: 24rpx;
    swiper{
      color: #FFF;
      font-size: 26rpx;
      height: 56rpx;
      width: 360rpx;
      margin-left: 24rpx;
      border-radius: 30rpx;
      background: rgba(0, 0, 0, 0.4);

      .swiper-item{
        text-align: center;
        line-height: 56rpx;
      }
    }
    
    .sign-block{
      min-height: 300rpx;
      margin-top: 24rpx;
      border-radius: 20rpx;
      background: #fff;

      .title-part{
        @include flex;
        @include j-between;
        padding: 24rpx;

        .days{
          color: #fe4034;
          font-size: 32rpx;
          font-weight: bold;

          &::before{
            content: '已连续签到 ';
          }
          &::after{
            content: ' 天';
          }
          &::before,
          &::after{
            color: #333;
            font-size: 28rpx;
            font-weight: normal;
          }
        }
        .link{
          @include flex;
          @include a-center;
          color: #fe4034;
          image{
            width: 26rpx;
            height: 26rpx;
            display: block;
            margin-left: 4rpx;
            margin-top: 2rpx;
          }
        }
      }
      .content-part{
        @include flex;
        padding: 6rpx;

        .sign-day-item{
          @include sub-item;
          @include flex(column);
          @include a-center;
          @include j-between;
          color: #bbb;
          font-size: 26rpx;
          border-radius: 10rpx;
          background: #f2f2f2;
          margin: 6rpx;
          padding: 10rpx 0;
          height: 120rpx;
          box-sizing: border-box;

          .img-container{
            width: 52rpx;
            height: 52rpx;
            &.box{
              width: 56rpx;
              height: 56rpx;
            }
          }

          &.active{
            color: #fff;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5a12), to(#ff3b1c));
            background-image: linear-gradient(#ff5a12, #ff3b1c);
            -webkit-box-shadow: 0 6px 3px rgba(235, 20, 20, 0.452);
            box-shadow: 0 6px 3px rgba(235, 20, 20, 0.452);
          }
        }
      }
      .reminder-part{
        @include flex;
        @include j-between;
        padding: 24rpx 0 24rpx 24rpx;

        .left{
          @include flex;
          @include a-center;

          image{
            width: 44rpx;
            height: 44rpx;
            margin-right: 12rpx;
            display: block;
          }
        }
      }
      
    }
  }

  .modal{
    @include transition;
    @include flex(column);
    @include center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    .close-btn{
      width: 60rpx;
      height: 60rpx;
      margin-top: 24rpx;
    }

    &.rule-modal{
      transform: scale(0, 0);
      .title{
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center center;
      }
      .modal-content{
        width: 580rpx;
        padding: 32rpx;
        background: #fff;
        border-radius: 20rpx;
  
        .line{
          margin-top: 24rpx;
        }
      }

      &.active{
        transform: scale(1, 1);
      }
    }
    &.sign-success-modal{
      color: #FFF;
      .modal-content{
        text-align: center;
        padding: 32rpx 0;
        width: 300rpx;
        border-radius: 20rpx;
        background: rgba(51, 51, 51, 0.7);
        box-sizing: content-box;

        .img{
          height: 100rpx;
          margin-bottom: 12rpx;
        }
      }
    }
    &.rewards-modal{
      .modal-content{
        color: #FBE9C9;
        font-size: 28rpx;
        width: 600rpx;
        padding: 30rpx;
        text-align: center;
        border-radius: 60rpx;
        background-color: #EB4E52;
        &>.title{
          font-size: 48rpx;
          font-weight: bold;
          margin-bottom: 12rpx;
        }
        .reward-list{
          overflow-y: scroll;
          height: 450rpx;
          margin: 32rpx 0;
        }
        .reward-item{
          @include flex;
          @include a-center;
          height: 156rpx;
          padding: 0 36rpx;
          background-size: 100% auto;
          background-repeat: no-repeat;
          margin-bottom: 24rpx;

          .img{
            width: 100rpx;
            height: 100rpx;
          }
          .sub-item{
            @include sub-item;
            color: #000;
            font-size: 24rpx;
            text-align: left;
            margin-left: 12rpx;
            .price{
              font-size: 48rpx;
              font-weight: bold;

              &::before{
                content: '￥';
                font-size: 28rpx;
              }
            }
            .title{
              @include text-ellipsis;
            }
          }
          .select-btn{
            width: 46rpx;
            height: 46rpx;
          }
          .btn{
            color: #FFF;
            font-size: 26rpx;
            padding: 0 20rpx;
            line-height: 48rpx;
            border-radius: 22rpx;
            background: #ff4a30;
          }

          &:last-child{
            margin-bottom: 0;
          }
        }
        &>.btn{
          color: #EB4E52;
          font-size: 32rpx;
          font-weight: bold;
          padding-bottom: 8rpx;
          line-height: 88rpx;
          background-size: auto 100%;
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }

    &.sign-success-modal,
    &.rewards-modal{
      transform: translateX(100%);
      &.active{
        transform: translateX(0);
      }
    }
  }
}